Know The WordPress Theme File Structure To Start Developing.

September 9th, 2016 | by Ravi Chahar || 6 Comments |

Are you thinking about developing a WordPress theme? If you do then you should know about WordPress theme file structure. What are the important files and portions you have in a WordPress theme?

You should know everything about it. Though if you want to develop a custom theme for your blog then you should have the knowledge of HTML, CSS, and PHP.

If you are not going to develop a light yet effective website theme then you won’t need to use the Javascript except in the Navigation menu.

Know every aspect of WordPress theme file structure so that you can start building your WordPress theme with each file. In this post, I will provide an anatomy of a WordPress theme.

WordPress Theme File Structure Consists Many Files.

First of all, let you let you know about different sections to create a WordPress theme. There are mainly four portions.

1. Header Section.

As its name suggests, the upper portion of the theme is the header section in which you would include the name of your website with a tagline or directly upload the logo of your website.

Most of the developers add the navigation menu in the headers section. Do you know how to create navigation menu in WordPress?

All the categories or pages are shown on the menu to guide the users about the type of the content available on your website.

2. Footer Section.

Just in the bottom of the screen, you would see the footer area where you place the copyright text and many other related contents.

There are many developers who add the navigation menu in the footer area too. As you can notice on the bottom of this website running on BloggingLove Theme, you can see the navigation menu consisting all the pages.

3. Content Section.

This is the main area of your WordPress theme where you show the articles you publish. It contains all the data you handle from your WordPress post editor.

You can display excerpt in WordPress theme in place of content using WordPress functions. Loops are used for the articles.

There are many types of the content areas. On the home page of the WordPress theme, you would like to show the featured article or the dynamic data with bigger and attractive images with no sidebar.

But on the blog page, you show the latest published articles. It’s always recommended to add read more button instead of showing the full content of the article.

Though the WordPress theme file structure may vary but the header, footer, and content area would be same. The design would vary but the concept won’t.

4. Sidebar Section.

There are many WordPress themes which don’t consist the sidebar. But still, it’s one of the most important parts of WordPress theme file structure.

The sidebar may be on both the sides or one. It is dependent on the developer. In most of the cases, you would see the sidebar on the right side.

You can show the recent post, add subscription form, add any affiliate product etc.

Let Me Walk You Through The WordPress Theme File Structure Properly.

There are some files which are used to create all the sections mentioned above. You may have noticed that the comment section, search box, and many other things are present on the website.

You have to create the PHP files for each of the section.

1. header.php

This is the file which consists the meta tags, title tag and starting of the HTML. The stylesheet is linked in the head section.

If you have any idea about HTML then all the external files are linked put putting in the head section. Though it is recommended to put the Javascript in the bottom.

If you want to develop a mobile-responsive WordPress Theme then you have to add the meta tag which can adjust the theme according to the screen of the device.

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

2. footer.php

All the tags which were started in the header.php would close in this file. Just like the header.php, you can add the Javascript in this file. You may have noticed that the copyright is added on every website.

It is shown in the footer area where you can add many other widgets. As you can see, there are three widgets shown on this website.

If you want to add any extra widget then you can do that by adding one extra “div” tag.

3. index.php

This is the main file which loads when you open any website. The content you add in this file will open when someone visits your website.

For better coding, it’s necessary that you don’t repeat the code. So, for making it shorter, you can put the PHP code to load any other file which is used at different places.

Suppose, you are creating a loop and in the middle, the same content is needed which have to be shown at many other places. So you can use one file on all places.

4. front-page.php

In WordPress Theme file structure, this file plays an important role. When you open any WordPress file then WordPress will search for this file.

If you want to add any custom home page then it is possible by adding the code in this file. But, you have to differ the blog page and the home page.

5. functions.php

All the theme functions are added in this file. If you want to add any extra theme support option then you have to add it in this file.

You may have read a lot about adding the codes in”functions.php” and people do that without even checking the code. Well, reason is that the functioning of the theme is handled by this file.

It’s not possible to develop a WordPress theme without it.

6. style.css

Now is the term to reach the front-end. We have talked about the back-end files. But your WordPress theme would be plain until you add the CSS file.

The stylesheet is linked in the head section of the theme. While building the WordPress theme file structure using the HTML and PHP, the IDs and classes are given to many “divs” , paragraphs etc.

You have to design the look of your theme using this single file. CSS is an amazing language and you can have fun with it.

7. comments.php

If you want to show the WordPress default commenting system then you have to add this file. It is one of the most complicated files in the theme development.

If you are not a skilled developer then it would be hard to create the comment section. In every WordPress theme, there should be the comment section so that people can share their views.

As you know that blog commenting is one of the most important actions to take.

8. searchform.php and search.php

It is dependent on the developer whether he/she wants to provide the search form in the theme or not. But in most of the WordPress themes, you would see the search box.

The searching results are handled by the search.php and the form is generated using the searchform.php. You can enhance the search results using a few WordPress codex.

9. sidebar.php

If you want to show the sidebar on your WordPress theme then you can do that using this file. The file structure of the sidebar would be handled using the HTML.

10. single.php

To build the single post where you show the full content of the post is handled by this file. In the blog page, you show the excerpt in place of the content, but here you show the full content.

The comment section, author bio etc are added in the single.php file.

11. page.php

Just like the single.php, this file controls the output of the pages of your website. If you don’t want to add the comment section below the pages then page.php would let you do that.

The output for all the pages can be controlled.

12. content.php

The content you show in the single.php or anywhere else, this file is considered. It is because the loops you generate for the content are added in this file.

It is mostly used to reduce the size of the theme. You can add the content loops and then this file can be used in single.php, index.php.

There are many other files in the WordPress theme file structure depending on the vision of the developer. If you want to add the custom posts then you have to add the PHP file for each of the posts.

Suppose, if you want to add the gallery post feature, a sticky post feature then you can do that by creating a new PHP file and adding the theme support in the functions.php file.

WordPress Theme File Structure Is Quite Easy Yet Complicated To Understand.

If you know a little bit about HTML, PHP, and CSS, then it would be so easy for your to understand the concept of WordPress theme building. But if you are a newbie then it would take some time.

Though, the theme development process is a way different than it seems. You have to learn the WordPress functions which are using to show the actions.

WordPress has many functions which are used in the theme development process. When you call the header section, the navigation menu, footer section etc, you have to call the WordPress functions for each of the section.

I have provided the basic of the WordPress theme file structure. Rest, you have to learn.